<template>
    <div>
        <div class="detailpicture">
            <div class="picture-left">

            </div>
            <div class="picture-rigth">
                <div class="div1">VERSACE</div>
                <div class="div2"> 高腰收腰时尚短衫</div>
                <div class="div3">￥8, 000</div>
                <div class="div4">颜色：黑色</div>
                <div class="div5">
                    <div v-for="(item,index) in 4" :key="index" @click="pitchon(index)" :style="colourid==index?'':'background: #000;'">
                        <span v-if="colourid==index" style="background: #000;"></span>
                    </div>
                </div>
                <div class="yardage">
                    <span>尺码：国际码</span>
                    <div>
                        <div @click="sizechartisshow=!sizechartisshow">
                            <span class="yardage-text">选择尺码</span>
                            <div class="icon">
                                <i class="iconfont icon-shang1"></i>
                            </div>
                        </div>
                        <ul class="sizechart" v-if="sizechartisshow">
                            <li class="sizechart-item" v-for="(item,index) in 4" :key="index">XL</li>
                        </ul>                   
                    </div>
                </div>
                <div class="addtocart">
                    <button>加入购物车</button>
                    <button><i class="iconfont icon-xin1"></i></button>
                </div>
                <div class="div6">
                    <span>尺码指南</span><span class="iconfont icon-zuoqianjin"></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            colourid: 0,
            sizechartisshow: false
        }
    },
    methods: {
        pitchon(i) {
            this.colourid = i
        }
    },
}
</script>

<style lang="scss">
.detailpicture {
    margin-top: 48px;
    overflow: hidden;
    .picture-rigth {
        float: left;
        >.div1 {
            font-size: 28px;
            font-weight: 800;
        }
        >.div2 {
            font-size: 20px;
            margin-top: 10px;
        }
        >.div3 {
            font-size: 20px;
            font-weight: 800;
            margin-top: 10px;
        }
        >.div4{
            font-size: 14px;
            margin-top: 10px;
        }
        >.div5 {
            overflow: hidden;
            margin-top: 10px;
            >div {
                width: 28px;
                float: left;
                height: 28px;
                border: 2px solid #000;
                border-radius: 50%;
                text-align: center;
                line-height: 32px;
                position: relative;
                margin-right: 4px;
                cursor: pointer;
                >span {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-left: -12px;
                    margin-top: -12px;
                }
            }
        }
        >.yardage {
            margin-top: 32px;
            width: 362px;
            >span {
                font-size: 14px;
            }
            >div {
                margin-top: 10px;
                border: 1px solid #000;
                line-height: 48px;
                position: relative;
                >div {
                    >.yardage-text {
                        padding-left: 29px;
                    }
                    .icon {
                        width: 36px;
                        height: 48px;
                        font-size: 26px ;
                        line-height: 48px;
                        border-left: 1px solid #000;
                        text-align: center;
                        position: absolute;
                        right: 0;
                        top: 0;
                        >i {
                            display: inline-block;
                            transform: rotate(180deg)
                        }
                    }
                }
                >.sizechart {
                    position: absolute;
                    top: 48px;
                    left: -1px;
                    width: 100%;
                    border: 1px solid #000;
                    border-top:none ;
                    z-index: 22;
                    background: #fff;
                    >.sizechart-item {
                        line-height: 48px;
                        padding-left: 29px;
                        border-top: 1px solid #000;
                    }
                }
            }
        }
        .addtocart {
            width: 362px;
            position: relative;
            margin-top: 15px;
            >button:nth-child(1) {
                width: 303px;
                height: 48px;
                color: #fff;
                background: #000;
                outline: none;
            }
            >button:nth-child(2) {
                width: 50px;
                height: 48px;
                background: #000;
                color: #fff;
                outline: none;
                position: absolute;
                right: 0;
                >i {
                    font-size: 24px;
                }
            }
        }
        .div6 {
            margin-top: 14px;
            position: relative;
            >span:nth-child(1) {
                font-size: 14px;
            }
            >span:nth-child(2) {
                font-size: 18px;
                margin-left: 4px;
                position: absolute;
                top: 2px;
            }
        }
    }
}

</style>